<template>
  <div class="menu">
    <ul @click="search">
      <li v-for="item in navlists" :key="item.categoryId">
        <a
          :data-categoryname="item.categoryName"
          :data-categoryid="item.categoryId"
          :data-level="1"
        >
          {{ item.categoryName }}
        </a>
        <div class="menu-content">
          <dl v-for="item in item.categoryChild" :key="item.categoryId">
            <dt>
              <a
                :data-categoryname="item.categoryName"
                :data-categoryid="item.categoryId"
                :data-level="2"
                >{{ item.categoryName }}</a
              >
            </dt>
            <dd v-for="item in item.categoryChild" :key="item.categoryId">
              <a
                :data-categoryname="item.categoryName"
                :data-categoryid="item.categoryId"
                :data-level="3"
                >{{ item.categoryName }}</a
              >
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getBaseCategoryList } from "../../api/home";
export default {
  name: "LeftNav",
  data() {
    return {
      navlists: [],
    };
  },
  methods: {
    search(e) {
      const { categoryname, categoryid, level } = e.target.dataset;
      if (!level) return;
      this.$router.history.push({
        name: "Search",
        params: this.$route.params,
        query: {
          categoryName: categoryname,
          [`category${level}Id`]: categoryid,
        },
      });
    },
  },
  mounted() {
    getBaseCategoryList()
      .then((res) => {
        this.navlists = res;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style></style>
